<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端框选</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        .test{
            border: 1px solid red;
            width: 0px;
            height: 0px;
            position: absolute;
            top: 100px;
            left: 100px;
        }
    </style>
</head>
<body>
    <img id="imgshow" src="http://127.0.0.1:38088/video=stream&camidx=0" width="400px" height="300px" alt="">
    <div id="rect" class="test"></div>
    <hr>
    设备分辨率：<input id="num1" type="text" value="3264"> <input type="text" value="2448"><br>
    预览框尺寸：<input id="num2" type="text" value="400"> <input type="text" value="300"><br>
    缩放：<input id="b" type="text" value="" onblur="jsvascript:this.value = document.getElementById('num1').value / document.getElementById('num2').value"><br>
    RECT  LEFT: <input id="res_left" type="text"> TOP: <input id="res_top" type="text"> RIGHT: <input id="res_right" type="text"> BOTTOM: <input id="res_bottom" type="text">
    <hr>
    <p style="color: red;">请使用鼠标在预览视频中，从左到右画出矩形框，图片默认保存在D盘，详细信息请看控制台</p>
    <script>
        // ondragstart - 用户开始拖动元素时触发
        // ondrag - 元素正在拖动时触发
        // ondragend - 用户完成元素拖动后触发
        var imgElement = document.getElementById("imgshow");
        var divElement = document.getElementById("rect")

        var res_left = document.getElementById("res_left")
        var res_top = document.getElementById("res_top")
        var res_right = document.getElementById("res_right")
        var res_bottom = document.getElementById("res_bottom")

        var x1,x2,y1,y2;
        var cx1,cy1,cx2,cy2;
        var b;
        imgElement.ondragstart = function(e){
            console.log(e)
            x1 = e.offsetX
            y1 = e.offsetY
            cx1 = e.clientX
            cy1 = e.clientY

            b = document.getElementById('num1').value / document.getElementById('num2').value;
            document.getElementById('b').value = b
        }
        imgElement.ondragend = function(e){
            console.log(e)
            x2 = e.offsetX
            y2 = e.offsetY
            cx2 = e.clientX
            cy2 = e.clientY

            // draw
            divElement.style = "position:absolute;top:"+cy1+"px;left:"+cx1+"px;width:"+(cx2-cx1)+"px;height:"+(cy2-cy1)+"px";
            res_left.value = Math.round(x1 * b);
            res_top.value = Math.round(y1 * b);
            res_right.value = Math.round(x2 * b);
            res_bottom.value = Math.round(y2 * b);

            // http
            data = {
                "filepath": "D:\\1.jpg",
                "left": res_left.value,
                "top": res_top.value,
                "right": res_right.value,
                "bottom": res_bottom.value
            }
            $.post("http://127.0.0.1:38088/select=imagearea", JSON.stringify(data), (res)=>{
                console.log(res);
                alert("裁剪成功")
            })
        }
    </script>
</body>
</html>